<template>
  <a-model :visible="visible"
    title="裁剪图片"
    @ok="handleOk"
    @cancel="visible = false"
    okText="确认"
    cancelText="取消"
  > 

    <div class="image-cropper">
        <img :src="src" id="proccessed-image" ref="cropperImg"/>
    </div>
  </a-model>
  <div class="image-process">
    <uploader
      action="https://jsonplaceholder.typicode.com/posts/"
      class="styled-uploader"
      :showUploadList="false"
      :beforeUpload="commonUploadCheck"
      @file-uploaded="handleFileUploaded"
    >
      <div class="uploader-container">
        <img :src="src" />
      </div>
      <template #loading>
        <div class="uploader-container">
          <LoadingOutlined spin />
          <h4>上传中</h4>
        </div>
      </template>
      <template #uploaded>
        <div class="uploader-container">
          <img :src="src" />
        </div>
      </template>
    </uploader>

    <div class="image-process-btn">
      <a-button
      @click="visible = true">
      <template v-slot:icon><ScissorOutlined/></template>
      裁剪图片
    </a-button>
    <a-button
      v-if="showDelete" 
      danger
      @click="handleDelete"
      >
      <template v-slot:icon><DeleteOutlined/></template>
      删除图片
    </a-button>
    </div>


  </div>
</template>
<script lang="ts" setup>
// 编辑器 右侧属性栏, 图片src属性编辑器
import {
  DeleteOutlined,
  LoadingOutlined,
  FileOutlined,
  FileImageOutlined,
  ScissorOutlined,
} from "@ant-design/icons-vue";
import { commonUploadCheck, UploadImgProps } from "@/helper";
import Uploader from "@/components/Uploader.vue";
import { ChangeParam } from "./Uploader";
import {UploadResp} from '@/extraType'
import { ref, defineEmits, defineProps, computed, watch, nextTick } from "vue";
import { Modal as aModel ,
  Button as aButton, 
} from "ant-design-vue";
import Cropper from 'cropperjs'
import axios from "axios";
import { uploadImage } from "@/axios/request";
interface CropperDataProps{
  x: number;
  y: number;
  width: number;
  height: number;
}

const emit = defineEmits<{
  (e: "file-uploaded", p: UploadResp): void;
  (e: "change", p: string): void;
}>();

const props = defineProps<{
  src: string;
}>();

// const srcComputed = computed(() => props.src);
const visible = ref(false);
const showDelete = ref(true);
const cropperImg=ref<null | HTMLImageElement>(null)
let cropData: null | CropperDataProps = null;
let cropper: Cropper;
const handleDelete = () => {
  emit("change", '');
};

const handleOk = ()=>{
  if(cropData) {
    const { x, y, width, height } = cropData;
    // const base64 = cropper.getCroppedCanvas().toDataURL();
    cropper.getCroppedCanvas().toBlob(blob=>{
      if(blob){
        const url = URL.createObjectURL(blob)
        console.log(url);
        //这里如果要获取url 要么then,要么async,但是都要关闭一下visble
        uploadImage(blob);
        emit("change", url);
      }
    })

  }
  visible.value = false
}

const handleFileUploaded = (data: UploadResp) => {
  console.log("ImageSrcProp", data);
  emit("file-uploaded", data);
  if(data.data){
    emit("change", data.data.url);
  }
};

watch(()=>visible.value, async (newValue)=>{
  if(newValue){
    await nextTick()
    console.log("cropper",cropperImg.value);
    if(cropperImg.value){
      cropper = new Cropper(cropperImg.value, {
        crop(event){
          const {x, y, width, height} = event.detail
          // console.log("event.detail",event.detail);
          cropData = {
            x: Math.floor(x),
            y: Math.floor(y),
            width: Math.floor(width),
            height: Math.floor(height)
          }
        }
      })
    }
  } else {
    if (cropper) {
      cropper.destroy();
    }
  }
})

</script>
<style scoped lang="less">
.uploader-container {
  text-align: center;
  padding: 10px;
  width: 100%;
  border: 2px dotted #efefef;
  color: #ccc;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.uploader-container:hover {
  border: 2px dotted #1890ff;
  color: #1890ff;
}
.uploader-container h4 {
  color: #999;
  transition: all 0.25s ease-in-out;
}
.uploader-container:hover h4 {
  color: #1890ff;
}
.uploader-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-process{
  display: flex;
  flex: 2 1;
  .image-process-btn{
    display: flex;
    flex-direction: column;
  }
}
.image-cropper {
  img{
    display: block;
    max-width: 100%;
  }
}
</style>
